<template>
	<div class="wrapper-container">
        <el-tabs v-model="activeName" @tab-click='handleClick'>
			<el-tab-pane label="基础信息" name="first">
				<basic-info :dataForm="dataForm" @saveFirst="saveBasic" @continueJump="continueJump"></basic-info>
			</el-tab-pane>
            <el-tab-pane label="入学/毕业信息" name="second">
				<entrance-or-graduation :dataForm="dataForm" @saveSecond="saveSecond" @continueJump="lastClass"></entrance-or-graduation>
			</el-tab-pane>
            <el-tab-pane label="家庭成员情况" name="third">
				<family :dataForm="dataForm.xyFamilyInfo" @continueJump="saveBasic"></family>
			</el-tab-pane>
		</el-tabs>
		<el-dialog title="提示" :visible.sync="noticeDialog" width="983px" :closeOnClickModal="false">
			<div class="message-container">
				<p class="dialogNotice">您当前页面还有未保存信息,请先保存!</p>
				<span slot="footer" class="dialog-footer">
					<button @click="currentContinueJump">继续跳转</button>
					<button @click="returnSave">返回保存</button>
				</span>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import basicInfo from './addInfoComment/basics.vue'
import entranceOrGraduation from './addInfoComment/entranceOrGraduation.vue'
import family from './addInfoComment/family.vue'
import {getStudentInfo} from "@/api/student";
    export default {
		data(){
		  return {
            activeName:'first',
			dataForm:{},
			noticeDialog:false,
			oldName:'first',
			currentName:'first',
          }
		},
		components: {
			basicInfo,
            entranceOrGraduation,
            family,
		},
		mounted(){
			this.initList()
		},
        methods: {
			saveBasic(){
				this.activeName = 'second'
			},
			saveSecond(){
				this.activeName = 'third'
			},
			continueJump(){
				this.$router.push({
					path:'/student/studentStatus/infoSearch',
					query:{
						studentCode:this.$route.query.studentCode
					}
				})
			},
			lastClass(){
				this.activeName = 'first'
			},
			async initList(){
				let params = {
					studentCode:this.$route.query.studentCode
				}
				let res = await getStudentInfo(params);
				this.dataForm = res;
			},
			handleClick(tab){
				this.initList();
				this.noticeDialog = true;
				this.oldName = tab
			},
			currentContinueJump(){
				this.noticeDialog = false
				this.currentName = this.activeName
			},
			returnSave(){
				this.noticeDialog = false;
				// this.$nextTick(()=>{
				// 	this.activeName = this.currentName;
				// })
			}
        }
    };
</script>
<style scoped lang="less">
@import "../../../styles/commonCss.less";

    .wrapper-container {
		margin: 47px auto 0;
		height: 785px;
	}
	.dialogNotice{
		font-size: 18px;
		font-family: Microsoft YaHei;
		font-weight: bold;
		line-height: 20px;
		color: #004CA7;
		text-align: center;
		margin: 68px 0 92px 0;
	}
	/deep/.el-tabs__item{
		line-height: 38px;
		color:#054CA7 ;
		font-weight: bold;
        font-weight: bold;
        background: rgba(77, 129, 192, 0.1);
        border-radius: 6px 6px 0px 0px;
        margin-right: 30px;
        padding: 0 20px!important;
	}
	/deep/.el-tabs__active-bar{
		height:0px
	}
	/deep/.el-tabs__nav-wrap::after {
		background-color:#004CA7 ;
		height: 1px;
	}
    /deep/.el-tabs__item.is-active{
        color: #fff;
        background: #4D81C0;
    }
	.dialog-footer{
		display: flex;
		justify-content: center;
		margin-bottom: 100px;
		button{
			width: 114px;
			height: 36px;
			border-radius: 6px;
			&:nth-child(1) {
				background: #FFF6EF;
				border: 1px solid #F3B815;	
				color: #F3B815;
				margin-right: 96px;			
			}
			&:nth-child(2) {
				background: #F1FFF8;
				border: 1px solid #02C86C;
				color: #02C86C;
			}
		}
	}
</style>